<script>
import GradeGauge from "@/components/GradeGauge.vue"
import RingGauge from "@/components/RingGauge.vue";
import SideRecommend from "@/components/SideRecommend.vue";
import Progress from '@/components/Progress.vue'
import Exam from "@/components/Exam.vue";
import FloatBtn from "@/components/FloatBtn.vue";
import ElTree from "@/components/ElTree.vue";

export default {
  components: {
    FloatBtn,
    Exam,
    SideRecommend,
    RingGauge,
    GradeGauge,
    Progress,
    ElTree
  },
  data() {
    return {
      /**
       * 已掌握的题数
       */
      mastered: 17,
      /**
       * 未掌握的题数
       */
      notMastered: 3,
      /**
       * 正确的题数
       */
      correct: 15,
      /**
       * 错误的题数
       */
      wrong: 15,
      /**
       * 课程列表
       */
      courseItems: [
        {
          id: 1,
          imageSrc: require("@/assets/img/python教程.png"),
          description: "Python基础应用"
        },
        {
          id: 2,
          imageSrc: require("@/assets/img/离散数学_东北大学(全69讲).144255360.jpeg"),
          description: "离散数学 东北大学"
        },
        {
          id: 3,
          imageSrc: require("@/assets/img/算法设计与分析_-_北航童咏昕教授.367057689.png"),
          description: "算法设计与分析"
        },
      ],
      /*
      * 教辅资源列表
       */
      docItems: [
        {
          id: 1,
          imageSrc: this.getSvgImage("Python U1 教案"),
          description: "Python U1 教案"
        },
        {
          id: 2,
          imageSrc: this.getSvgImage("Python U1 PPT"),
          description: "Python U1 PPT"
        },
        {
          id: 3,
          imageSrc: this.getSvgImage("Python U1 代码实例"),
          description: "Python U1 代码实例"
        },
        // 添加更多的项
      ],
      //treeData
      getNodeData(data) {
        console.log('data:', data)
      },
    }
  },
  computed: {
    // 使用计算属性来动态计算掌握的百分比
    masteredPercent() {
      return (this.mastered / (this.mastered + this.notMastered) * 100).toFixed(1);
    },

    // 使用计算属性来动态计算正确率
    correctPercent() {
      return this.correct / (this.correct + this.wrong) * 100;
    },
  },
  methods: {
    getSvgImage(description) {
      const encodedDescription = encodeURIComponent(description);
      return `data:image/svg+xml,%3Csvg width='320' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EDrawing%3C/title%3E%3Cg%3E%3Ctitle%3ELayer%201%3C/title%3E%3Crect id='svg_3' height='191.07122' width='382.49958' y='-2.5001' x='-5.00017' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3Ctext transform='matrix(1.28664 0 0 1.28664 -13.9226 -27.9567)' stroke='%23000' xml:space='preserve' text-anchor='start' font-family='Noto Sans JP' font-size='24' id='svg_2' y='97.37594' x='22.47896' stroke-width='0' fill='%23ffffff'%3E${encodedDescription}%3C/text%3E%3Crect id='svg_4' height='2.14285' width='23.21426' y='101.42836' x='113.21399' stroke-width='0' stroke='%23000' fill='%233891ff'/%3E%3C/g%3E%3C/svg%3E`;
    }
  },
}
</script>

<template>
  <div>
    <FloatBtn></FloatBtn>
    <div class="row">
      <div class="col-12">
        <card>
          <div class="row">
            <span class="deco"></span>
            <h2 class="clearMargin">Python程序设计</h2>
          </div>
        </card>
      </div>

      <div class="col-12">
        <card>
          <h3 class="card-title" style="text-align: left"> 课程情况概览</h3>
          <div class="row">
            <div class="col-lg-5" style="height: 360px;overflow: auto;scrollbar-width: none">
              <ElTree :listData="require('@/assets/json/PythonListData.json')"></ElTree>
            </div>
            <div class="col-lg-7" id="center">
              <card>
                <!--                <h3 class="card-title" style="text-align: left;margin-bottom: 2rem">-->
                <!--                  TDA指标-->
                <!--                  <a class="text-muted" style="text-align: right;font-size: 14px">T=Time D=Difficult A=Accuracy</a>-->
                <!--                </h3>-->
                <h1 class="TDA" style="text-align: center">TDA / 8.1</h1>
                <p class="text-muted ">TDA数值越高表示该环节的水平越高</p>
                <h4>击败了全校<a style="color:#2e63f3;">80%</a>的学生</h4>
                <div style="height: 2.3rem;"></div>
                <hr>
                <div class="row">
                  <div class="col-4">
                    <h1 class="clearMargin">5.4 <a class="text-muted h4">s</a></h1>
                    <h4 class="text-muted clearMargin">平均用时</h4>
                  </div>
                  <div class="col-4">
                    <h1 class="clearMargin">89 <a class="text-muted h4">%</a></h1>
                    <h4 class="text-muted clearMargin">正确率</h4>
                  </div>
                  <div class="col-4">
                    <h1 class="clearMargin">0.42</h1>
                    <h4 class="text-muted clearMargin">平均难度</h4>
                  </div>
                </div>
              </card>
            </div>
          </div>
        </card>
      </div>

      <div class="col-lg-6" style="height: 16.5rem">
        <card>
          <h3 class="card-title" style="text-align: left"> 等级评价</h3>
          <GradeGauge :ring-value="0.82"></GradeGauge>
        </card>
      </div>
      <div class="col-lg-6" id="center">
        <card>
          <h3 class="card-title" style="text-align: left"> 知识点掌握情况</h3>
          <div class="row">
            <div class="col-6">
              <div style="width: 100%;height: auto;">
                <RingGauge :value="masteredPercent" name="知识点掌握"/>
                <h4 class="text-muted" style="text-align: center">已掌握：{{ mastered }} | 未掌握：{{ notMastered }}</h4>
              </div>
            </div>
            <div class="col-6">
              <div style="width: 100%;height: auto;">
                <RingGauge :color="['#ffb497', '#ff4100']" :value="correctPercent" name="答题正确率"/>
                <h4 class="text-muted" style="text-align: center">答对题数：{{ correct }} | 答错题数：{{ wrong }}</h4>
              </div>
            </div>
          </div>
        </card>
      </div>
      <div class="col-lg-8" style="padding: 0">
        <div class="col-lg-12">
          <card>
            <h3 class="card-title" style="text-align: left"> 知识点明细</h3>
            <Progress :title="'变量、数据类型'" :width="100" :progress="100" :strokeWidth="10" :showInfo="true"/>
            <hr>
            <Progress :title="'运算符'" :width="100" :progress="75" :strokeWidth="10" :showInfo="true"/>
            <hr>
            <Progress :title="'条件和循环'" :width="100" :progress="50" :strokeWidth="10" :showInfo="true"/>
            <hr>
            <Progress :title="'函数'" :width="100" :progress="25" :strokeWidth="10" :showInfo="true"/>
          </card>
        </div>
        <div class="col-lg-12">
          <card>
            <h3 class="card-title" style="text-align: left"> 练习一下</h3>
            <exam style="min-height: 16.5rem"></exam>
          </card>
        </div>
      </div>

      <div class="col-lg-4">
        <side-recommend category="course">
          <template v-slot:title>推荐课程</template>
        </side-recommend>
        <!--        <side-recommend>
                  <template v-slot:title>推荐练习</template>
                </side-recommend>-->
        <side-recommend category="doc">
          <template v-slot:title>推荐课件</template>
        </side-recommend>
      </div>

    </div>
  </div>
</template>

<style scoped>
#center {
  text-align: center;
}

.clearMargin {
  margin-bottom: 0.5rem;
}

.deco {
  margin: 0 1rem;
  height: 2.5rem;
  width: 5px;
  background-color: #1f86f6;
}

</style>
